<template>
    <div class="tendency">
        <div class="top">
            <span style="color: aliceblue;font-weight: 700;font-size: 20px;">未来30天游客图趋势</span>
            <div class="logo"></div>

        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>
<script setup name='tendency'>
    import { ref, onMounted } from 'vue'
    //echarts插件引入
    import * as echarts from 'echarts'

    //水球图的实例
    let charts = ref()


    onMounted(() => {
        let mycharts = echarts.init(charts.value)


        mycharts.setOption({

            grid: {
                left: 0,
                right: 10,
                bottom: 0,
                top: 40,
                // 是否包含文本
                containLabel: true
            },
            xAxis: {
                type: 'category',

                splitLine: { // 设置 X 轴的分割线
                    show: false,

                },
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],

                min: 0, // 设置 X 轴的最小值
                boundaryGap: false,// 设置 X 轴从最左边开始
                axisLine: {
                    lineStyle: {
                        color: "#fff",
                    }
                }

            },
            yAxis: {
                name: `(`+'访问量'+`)`,
                nameLocation: 'end',
                show: true,
                splitLine: { // 设置 Y 轴的分割线

                    show: false,
                },
                nameTextStyle: {
                    color: 'white'
                },
                axisLine: {
                    lineStyle: {
                        color: "#fff",
                    }
                },

                min: 0,

            },
            series: [
                {
                    type: 'line',
                    data: [0, 100, 300, 200, 500, 290, 100],
                    smooth: true,
                    lineStyle: {
                        color: '#38F0B4',
                        width: 3
                    },
                    showSymbol: false,
                    //区域填充颜色
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#00314F' },
                            { offset: 0.8, color: '#01676C' }
                        ])
                    }
                }
            ]
        })
    })
</script>
<style scoped lang='scss'>
    .tendency {
        width: 940px;
        height: 100%;
        margin: 0px 20px;
        position: relative;
        background: url('@/views/screen/images/dataScreen-main-cb.png') no-repeat;
        background-size: 100% 100%;
        /* background-size: cover; */
margin-bottom: 50px;
        .top {
            .logo {
                display: block;
                margin-top: 10px;
                width: 68px;
                height: 7px;
                background: url('@/views/screen/images/dataScreen-title.png') no-repeat;

            }


        }

        .charts {
            margin: 20px;
            width: 90%;
            height: calc(100% - 80px);
        }

    }
</style>